<template>
	<div style="margin-bottom: 1rem;">
		<div class="yy" v-for="(item,i) in productItems" :key="i">
			<img :src="APIDomainName + item.picture" style="width: 100%;" class="tp1" @click="onDetail(item.id)">
			<div style="display: flex;align-items: center;width: 28rem;justify-content: space-between;">
				<div style="margin-left: 1rem;" @click="onDetail(item.id)">
					<div style="margin-top: 0.3rem;font-size: 22px;font-weight: bold; ">{{item.title}}</div>
					<div style="display: flex; font-size: 16px; margin-top: 0.5rem;">
						{{item.label}}
					</div>
				</div>
				<div @click="onClick(item.id)">
					<div v-if="is_checked.indexOf(item.id)!=-1">
						<van-button plain hairline round color="#7F8386" size="large"
							style="width: 100%;height: 40px;width: 7rem;margin-top: 0.5rem;background-color: #F4F8FB;font-weight: bold; ">
							已预约</van-button>
					</div>
					<div v-else>
						<van-button round color="#01CBE2" size="large" 
							style="width: 100%;height: 40px;width: 7rem;margin-top: 0.5rem;">预约</van-button>
					</div>
				</div>
			</div>
		</div>
		<div style="font-size: 16px;color: #BABEC1;text-align: center;margin-top: 2rem;">暂无更多</div>
	</div>
</template>

<script>
	import * as Tools from "@/utils/tools.js"
	import {
		appointmentSelectListAPI,
		addAppointmentAPI,
		deleteAppointmentAPI,
		appointmentSearchListAPI
	} from '@/api/appointment.js';
	import {
		getUserLocal,
	} from "@/utils/auth.js"

	export default {
		data() {
			return {
				productItems: [],
				is_checked: [],
				user: {},
				user_id: [],
			}
		},
		created() {
			this.getList();
			this.onSearch();
		},
		methods: {
			onSearch() {
				this.is_checked = [];
				appointmentSearchListAPI().then((result) => {
					result.data.forEach(item => {
						this.is_checked.push(item.id)
					}); //数据的遍历
					// console.log(result.data);
				});

			},
			getList() {
				appointmentSelectListAPI().then((result) => {
					console.log(result);
					this.productItems = result.data;
				});
			},
			onDetail(id) {
				this.$router.push({
					name: 'appointmentDetail',
					params: {
						id
					}
				});
			},
			onClick(id) {
				let list = this.is_checked;
				if (list.indexOf(id) == -1) {
					// 加到数组中
					this.is_checked.push(id);
					let data = {
						appointment_id: id,
					}
					//2.使用封装后的接口,注意：接口有参数
					addAppointmentAPI(data).then(result => {
						this.$toast(result.msg);
					}).catch(() => {});
					this.is_checked[id - 1] = true;
				} else {
					for (var i in this.is_checked) {
						if (this.is_checked[i] == id) {
							this.is_checked.splice(i, 1);
						}
						let ids = id;
						deleteAppointmentAPI(ids).then(result => {
							this.$toast(result.msg);
						}).catch(() => {});
					}
				}
			},
		},
		mounted() {
			//初始页面数据
			this.user = getUserLocal();
		}
	}
</script>

<style>
	.yy {
		width: 30rem;
		height: 20rem;
		background-color: #FFFFFF;
		border-radius: 1rem;
		margin: 1rem auto 0;
		box-shadow: 0px 2px 10px #C8C9CC;
	}
	.tp1 {
		width: 30rem;
		height: 15rem;
		border-top-left-radius: 1rem;
		border-top-right-radius: 1rem;
	}
</style>
